<template>
  <el-row type="flex" justify="center" align="middle" class="lgBox">
    <el-col :span="10" class="lg">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data () {
    // 自定义校验函数
    const validateMobile = (rule, value, callback) => {
      console.log(rule, value, callback)
      // rule代表规则不常用
      // value代表当前表单中输入的值
      // callback表示回调函数 执行校验成功和失败之后的后续操作
      if (!/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)) {
        callback(new Error('手机号格式不对'))
      } else {
        callback()
      }
    }
    return {
      form: {
        mobile: '',
        code: ''
      },
      rules: {
        mobile: [{ required: true, validator: validateMobile, trigger: ['change', 'blur'] }],
        code: [
          { required: true, message: '密码为必填项', trigger: ['change', 'blur'] },
          { min: 6, max: 8, message: '长度为6-8位', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  methods: {
    async onSubmit () {
      try {
        await this.$refs.form.validate()
        this.$router.replace('/dashboard')
      } catch (error) {
        console.log(error)
      }
    }
  },
}
</script>

<style lang="less" scoped>
.lg {
  border: 1px solid #eee;
  padding: 20px;
  height: 200px;
  background: #fff;
}

.lgBox {
  // vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
  // vh：视窗高度的百分比
  width: 100vw;
  height: 100vh;
  background-image: radial-gradient(
      circle at 67% 83%,
      hsla(317, 0%, 96%, 0.05) 0%,
      hsla(317, 0%, 96%, 0.05) 1%,
      transparent 1%,
      transparent 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 24% 80%,
      hsla(317, 0%, 96%, 0.05) 0%,
      hsla(317, 0%, 96%, 0.05) 27%,
      transparent 27%,
      transparent 63%,
      transparent 63%,
      transparent 100%
    ),
    radial-gradient(
      circle at 23% 5%,
      hsla(317, 0%, 96%, 0.05) 0%,
      hsla(317, 0%, 96%, 0.05) 26%,
      transparent 26%,
      transparent 82%,
      transparent 82%,
      transparent 100%
    ),
    radial-gradient(
      circle at 21% 11%,
      hsla(317, 0%, 96%, 0.05) 0%,
      hsla(317, 0%, 96%, 0.05) 35%,
      transparent 35%,
      transparent 45%,
      transparent 45%,
      transparent 100%
    ),
    radial-gradient(
      circle at 10% 11%,
      hsla(317, 0%, 96%, 0.05) 0%,
      hsla(317, 0%, 96%, 0.05) 21%,
      transparent 21%,
      transparent 81%,
      transparent 81%,
      transparent 100%
    ),
    radial-gradient(
      circle at 19% 61%,
      hsla(317, 0%, 96%, 0.05) 0%,
      hsla(317, 0%, 96%, 0.05) 20%,
      transparent 20%,
      transparent 61%,
      transparent 61%,
      transparent 100%
    ),
    radial-gradient(
      circle at 13% 77%,
      hsla(317, 0%, 96%, 0.05) 0%,
      hsla(317, 0%, 96%, 0.05) 63%,
      transparent 63%,
      transparent 72%,
      transparent 72%,
      transparent 100%
    ),
    radial-gradient(
      circle at 30% 93%,
      hsla(317, 0%, 96%, 0.05) 0%,
      hsla(317, 0%, 96%, 0.05) 33%,
      transparent 33%,
      transparent 82%,
      transparent 82%,
      transparent 100%
    ),
    linear-gradient(90deg, rgb(22, 176, 207), rgb(103, 7, 215));
}
</style>